<script lang="ts" setup>
import {reactive, ref, watch} from "vue";
import DataSourceInfoFormBO from "@/domain/bo/DataSourceInfoFormBO";
import {ElMessage, FormInstance, FormRules} from "element-plus";
import GlobalConstant from "@/domain/constants/GlobalConstant";
import SelectConstant from "@/domain/constants/SelectConstant";
import StringUtils from "@/utils/StringUtils";
import MysqlTableColumnMapVO from "@/domain/vo/MysqlTableColumnMapVO";
import {MysqlTableColumnMapFormBO} from "@/domain/bo/MysqlTableColumnMapFormBO";
import mysqlTableColumnMapService from "@/service/MysqlTableColumnMapService";

const props = defineProps({
  mysqlTableColumnMapVO: {
    type: MysqlTableColumnMapVO,
    required: true
  },
  dialogVisible: {
    type: Boolean,
    required: true
  }
});
//========================== 按钮事件 ==========================
const testConnectionRes = ref(-1);

function closeDialog() {
  props.dialogVisible = false;
}

async function saveMysqlTableColumnMapForm() {
  let flag = false;
  if (StringUtils.isBlank(mysqlTableColumnMapFormBO.id as string)) {
    await mysqlTableColumnMapService.add(mysqlTableColumnMapFormBO)
        .then(
            (res) => {
              props.dialogVisible = false;
              ElMessage.success(GlobalConstant.SAVE_SUCCESS_MSG);
              flag = true;
            }, (error) => {
              ElMessage.error(GlobalConstant.SAVE_ERROR_MSG + error.msg);
            }
        )
  } else {
    await mysqlTableColumnMapService.edit(mysqlTableColumnMapFormBO)
        .then(
            (res) => {
              props.dialogVisible = false;
              ElMessage.success(GlobalConstant.EDIT_SUCCESS_MSG);
              flag = true;
            },
            (error) => {
              ElMessage.error(GlobalConstant.SAVE_ERROR_MSG + error.msg);
            }
        )
  }
  return flag;
}

//========================== watch监听 ==========================
const mysqlTableColumnMapFormBO = reactive(new MysqlTableColumnMapFormBO());
watch(
    () => props.dialogVisible,
    (o, n) => {
      if (!n) { //由false改为true表示显示，需要渲染内容
        testConnectionRes.value = -1;
        mysqlTableColumnMapFormBO.coverFormMysqlTableColumnMapVO(props.mysqlTableColumnMapVO)
      }
    }
)

//========================== 回调事件 ==========================
const emits = defineEmits(["closeAfter", "saveAfter"])

function closeHandle() {
  closeDialog();
  emits("closeAfter");
}

function saveHandle(ruleFormRef: FormInstance) {
  ruleFormRef.validate((valid) => {
    if (valid) {
      saveMysqlTableColumnMapForm()
          .then((flag) => {
            if (flag) {
              emits("saveAfter");
            }
          })
    }
  })
}

//========================== 表单校验规则 ==========================
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<MysqlTableColumnMapFormBO>>({
  dataType: [
    {
      required: true,
      message: '必填',
      trigger: 'blur'
    },
  ],
  mapType: [
    {
      required: true,
      message: '必填',
      trigger: 'blur',
    },
  ]
})
</script>
<template>
  <div>
    <el-dialog
        v-model="props.dialogVisible"
        title="Tips"
        width="30%"
        :close-on-click-modal="false"
        :before-close="closeHandle"
    >
      <template #title>
        <template v-if="props.mysqlTableColumnMapVO?.id === undefined">
          <span>新增</span>
        </template>
        <template v-else>
          <span>编辑</span>
        </template>
      </template>
      <el-form
          ref="ruleFormRef"
          :rules="rules"
          :model="mysqlTableColumnMapFormBO"
          label-width="120px"
          class="demo-ruleForm"
          status-icon
      >
        <el-form-item prop="dataType" label="属性类型" placeholder="dataType">
          <el-input v-model="mysqlTableColumnMapFormBO.dataType"/>
        </el-form-item>
        <el-form-item prop="mapType" label="映射类型" placeholder="mapType">
          <el-input v-model="mysqlTableColumnMapFormBO.mapType"/>
        </el-form-item>
        <el-form-item prop="remarks" label="备注信息" placeholder="remarks">
          <el-input v-model="mysqlTableColumnMapFormBO.remarks"/>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeHandle(ruleFormRef)">
          关闭
        </el-button>
        <el-button type="primary" @click="saveHandle(ruleFormRef)">
          保存
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>

</style>